import React, { Component } from 'react';
import * as echarts from 'echarts';
import "./index.css"
class Order_summarace extends Component {
    state = {
        orderList: [{
            "num": "4",
            "title": "订单数量"
        }, {
            "num": "2",
            "title": "待付款"
        }, {
            "num": "1",
            "title": "待发货"
        }, {
            "num": "0",
            "title": "待评价"
        }, {
            "num": "0",
            "title": "维权中"
        }, {
            "num": "1",
            "title": "今日下单量"
        }, {
            "num": "0",
            "title": "今日订单金额"
        }]
    }
    componentDidMount() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }
            ]
        };
        option && myChart.setOption(option);
    }
    render() {
        const { orderList } = this.state
        return (
            <div className="order_summarace">
                <div className="order_sum_header">
                    {
                        orderList.map((item, index) => <p key={index}>
                            <span>
                                {item.num}
                                <br />
                                {item.title}
                            </span>
                        </p>)
                    }
                </div>
                <div id="main"></div>
            </div>
        );
    }
}

export default Order_summarace;
